<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">{{$label}}</label>
        <div class="layui-input-inline addrInput">
            <input type="text" value="{{$addr}}" name="{{$name}}" class="layui-input addr" required  lay-verify="required" disabled>
            <input type="hidden" name="{{$name}}_lat" value="{{$lat}}">
            <input type="hidden" name="{{$name}}_lng" value="{{$lng}}">
            <button type="button" class="layui-btn" onclick="map{{$name}}('{{$name}}')"><i class="layui-icon">&#xe715;</i>选取</button>
        </div>
    </div>
</div>

<div id="{{$name}}" style="display: none;height: 100%">  <!--OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77-->
    <iframe width="100%" height="100%" frameborder=0
            src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=3CPBZ-T2ZWJ-7B5FR-KJHAO-KMLEQ-LMBR7&referer=myapp">
    </iframe>
</div>
<style>
    .addrInput{
        min-width: 300px;
    }
    .addr{
        display: inline-block;
        width: 75%;
    }
</style>
<script>
    var currentName = "";
    layui.use(['layer'],function () {
        var layer = layui.layer;
    });
    window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
            //console.log('location', loc);
            $("input[name="+currentName+"]").val(loc.poiaddress);
            $("input[name="+currentName+"_lat]").val(loc.latlng.lat);
            $("input[name="+currentName+"_lng]").val(loc.latlng.lng);
        }
    }, false);

    /**
     * 打开选取地址
     * @param name
     */
    function map{{$name}}(name) {
        currentName = name;
        layer.open({
            type: 1,
            area: ['300px', '560px'],
            content: $("#{{$name}}") //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }
</script>